<template>
  <div>
        <router-link to="/" class='header-abs-back' v-show="isShow">
           <i class='iconfont'>&#xe624;</i>
        </router-link>
        <div 
        class='header-fixed' 
        v-show="!isShow"
        :style="opacityStyles"
        >
             <router-link to="/" class='header-fixed-back'>
                 <i class='iconfont'>&#xe624;</i>
             </router-link>
              <div class="content">景点详情</div>
        </div>
  </div>
</template>
<script>
export default {
    name:"DetailHeader",
    data (){
        return{
            isShow:true,
            opacityStyles:{
                opacity:0
            }
        }
    },
    methods:{
        handleScroll (){
            const top=document.documentElement.scrollTop || document.body.scrollTop
            if(top>40){
                if(top<100){
                   let opacity=top/100;
                   this.opacityStyles={
                       opacity:opacity
                   }
                }
               this.isShow=false
            }else{
                this.isShow=true
            }
        }
    },
    activated (){
        window.addEventListener("scroll",this.handleScroll)
    },
    deactivated (){
        window.removeEventListener("scroll",this.handleScroll)
    }
}
</script>
<style lang="scss" scoped>
@import  "~styles/_parameters.scss";
.header-abs-back{
    $h:.7rem;
    position:absolute;
    z-index:2;
    top:.1rem;
    left:.1rem;
    display:block;
    text-align:center;
    line-height: $h;
    width:$h;
    height:$h;
    border-radius:50%;
    background-color: rgba(#000,.3);
    color:#fff;
}
.header-fixed{
    position:fixed;
    left:0;
    top:0;
    right:0;
    z-index:8;
    background-color:$bgColor;
    color:#fff;
    height:$headerHeight;
    line-height:$headerHeight;
    padding:0 $headerHeight;
    .content{
        width:100%;
        text-align:center;
    }
}
.header-fixed-back{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    display:block;
    width:$headerHeight;
    text-align:center;
    cursor:pointer;
    color:#fff;
   .iconfont{
        font-size:small;
   }
}
</style>